<template>
  <div>
    <el-row>
      <el-col :span="18" class="marginTop paddingLfet colorwhite fontSize">
        年龄数据
      </el-col>
      <el-col :span="6" class="jend marginTop paddingRight colorwhite fontSize">
        详情>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="main" :style="chartStyle"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      height: 31,
    };
  },
  computed: {
    chartStyle() {
      return `width: 100%; height: ${this.height}vh;`;
    },
  },
  mounted() {
    // 获取 当前可视化  屏幕尺寸
    let WW = window.innerWidth;
    if (WW < 1300) {
      this.height = 34;
    }
    setTimeout(() => {
      this.echarts111();
    }, 100);
  },
  methods: {
    echarts111() {
      var myChart = echarts.init(document.getElementById("main"));
      var option;
      // 指定图表的配置项和数据

      option = {
        // title: {
        //   text: "某站点用户访问来源",
        //   subtext: "纯属虚构",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        // },
        series: [
          {
            // 高亮
            emphasis: {
              // 标签
              label: {
                // 显示
                show: true,
                // 字体大小
                fontSize: "30",
                // 粗体
                fontWeight: "bold",
              },
            },
            name: "访问来源",
            type: "pie",
            radius: ["40%", "50%"],
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },
        ],
      };
      // 22222222222222222222222222222
      // option = {
      //   // 提示框
      //   tooltip: {
      //     // 触发类型
      //     trigger: "item",
      //     // 格式化
      //     formatter: "{a} <br/>{b}: {c} ({d}%)",
      //   },
      //   // 图例
      //   legend: {
      //     // 布局
      //     orient: "vertical",
      //     // 左边距
      //     left: "60%",
      //     // 上边距
      //     top: "40%",
      //     itemHeight: 15,
      //     textStyle: {
      //       fontSize: 15,
      //       color: "wah",
      //     },
      //     // 数据
      //     data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
      //   },

      //   // 数据
      //   series: [
      //     {
      //       setOption: [{}],
      //       selectedMode: "single",
      //       // 名称
      //       name: "访问来源",
      //       // 类型
      //       type: "pie",
      //       // 半径
      //       radius: ["40%", "50%"],
      //       center: ["30%", "50%"],
      //       // 防止标签重叠
      //       avoidLabelOverlap: false,
      //       selectedMode: "single",
      //       // 内部标签
      //       label: {
      //         // 显示
      //         show: false,
      //         // 位置
      //         position: "center",
      //         // 左边距
      //       },
      //       // 高亮
      //       emphasis: {
      //         // 标签
      //         label: {
      //           // 显示
      //           show: true,
      //           // 字体大小
      //           fontSize: "30",
      //           // 粗体
      //           fontWeight: "bold",
      //         },
      //       },
      //       // 标签线
      //       labelLine: {
      //         // 显示
      //         show: false,
      //       },
      //       // 数据
      //       data: [
      //         { value: 335, name: "直接访问" },
      //         { value: 310, name: "邮件营销" },
      //         { value: 234, name: "联盟广告" },
      //         { value: 135, name: "视频广告" },
      //         { value: 1548, name: "搜索引擎" },
      //       ],
      //       emphasis: {
      //         label: {},
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: "rgba(0, 0, 0, 0.5)",
      //         },
      //       },
      //     },
      //   ],
      // };

      myChart.setOption(option);

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.fontSize {
  font-size: 18px;
}
.colorwhite {
  color: white;
}
.paddingLfet {
  padding-left: 2vh;
}
.paddingRight {
  padding-right: 2vh;
}
.marginTop {
  margin-top: 2vh;
}
.jend {
  display: flex;
  justify-content: flex-end;
}
.we {
  display: flex;
  justify-content: flex-start;
}
</style>